import Vue from "vue";
import VueRouter from "vue-router";

// 引入路由组件
import Home from "@/views/Home";
import Search from "@/views/Search";
import Detail from "@/views/Detail";
import AddCartSuccess from "@/views/AddCartSuccess";
import ShopCart from "@/views/ShopCart";
import Trade from "@/views/Trade";
import Pay from "@/views/Pay";
import PaySuccess from "@/views/PaySuccess";
import Center from "@/views/Center";
import Login from "@/views/Login";
import Register from "@/views/Register";

import store from "@/store";

// 安装插件
Vue.use(VueRouter);

const router = new VueRouter({
  // 路由模式
  mode: "history",
  // 路由配置
  routes: [
    {
      // 路由路径
      path: "/home",
      // 路由组件
      component: Home,
      // 命名路由
      name: "Home",
      // meta参数，当当前路由匹配生效，这个meta参数就会生效
      // 可以通过$route.meta获取其中的参数
      // meta: {
      // isShowFooter: true,
      // },
    },
    {
      path: "/search",
      component: Search,
      name: "Search",
      // meta: {
      // isShowFooter: true,
      // },
    },
    {
      path: "/detail/:id",
      component: Detail,
      name: "Detail",
    },
    {
      path: "/addcartsuccess",
      component: AddCartSuccess,
      name: "AddCartSuccess",
    },
    {
      path: "/shopcart",
      component: ShopCart,
      name: "ShopCart",
    },
    {
      path: "/trade",
      component: Trade,
      name: "Trade",
    },
    {
      path: "/pay",
      component: Pay,
      name: "Pay",
    },
    {
      path: "/paysuccess",
      component: PaySuccess,
      name: "PaySuccess",
    },
    {
      path: "/center",
      component: Center,
      name: "Center",
    },
    {
      path: "/login",
      component: Login,
      name: "Login",
      meta: {
        // isShowFooter: false,
        isHiddenFooter: true,
      },
    },
    {
      path: "/register",
      component: Register,
      name: "Register",
      meta: {
        // isShowFooter: false,
        isHiddenFooter: true,
      },
    },
    {
      // 除了以上的其他所有路径
      path: "*",
      // 重定向
      redirect: "/home",
    },
  ],
  // 滚动行为
  // 每次进行路由跳转都会触发，返回值决定滚动条的位置
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
});

// 需要登录才能访问的路由列表
const AUTH_LIST = [
  "AddCartSuccess",
  "ShopCart",
  "Trade",
  "Pay",
  "PaySuccess",
  "Center",
];

// 绑定全局路由导航守卫
// 全局前置守卫（路由跳转之前触发）
router.beforeEach((to, from, next) => {
  // console.log("beforeEach", to, from, next);
  /*
    to 要去的路由对象
    from 从哪来的路由对象（刷新页面，代表 /）
      路由对象就是$route
    next 是一个函数（必须调用函数）
      调用next函数， 才会完成路由，才会加载渲染路由组件等
      直接调用，next()，跳转到to对应路由
      调用传参，next('/login')  next({ name: 'Login' }), 跳转传参的对应路由
  */

  /*
    希望登录才能访问指定页面
  */
  if (AUTH_LIST.includes(to.name)) {
    // 说明，要去的路由是需要登录才能访问的
    if (store.state.user.token) {
      // 有token，就可以访问
      next();
    } else {
      // 没有token，去登录
      next({
        name: "Login",
        query: {
          redirect: to.path,
        },
      });
    }
  } else {
    // 说明，不需要登录
    next();
  }
});
// 全局解析守卫
// router.beforeResolve((to, from, next) => {
//   console.log("beforeResolve", to, from, next);
//   next();
// });
// 全局后置守卫
// router.afterEach((to, from) => {
//   console.log("afterEach", to, from);
// });

export default router;
